<template>

    <section class="vpt-base-tpl-1002">
        <header class="vpt-base-title">
            {{ title }}
        </header>
        <section class="vpt-base-content">
            <div class="vpt-label-item" v-for="(item, i) in list">
                <label class="vpt-label">
                    {{ item.label }}：
                </label>
                <div class="vpt-val">
                    {{ item.value }}
                    <em class="vpt-unit">{{ item.unit }}</em>
                </div>
            </div>
        </section>
    </section>

</template>

<script setup>

const props = defineProps({
    title: {
        type: String,
        default: () => {
            return "";
        }
    },
    list: {
        type: Array,
        default: () => {
            return [];
        }
    }
})


</script>
<style lang="less" scoped>
.vpt-base-tpl-1002 {
    padding-left: 0.2rem;
    padding-top: 0.2rem;
    font-size: 0.3rem;
    width: 100%;

    .vpt-base-title {
        font-weight: 500;
        color: #FFFFFF;
        letter-spacing: 0;
    }

    .vpt-base-content {
        display: flex;
        width: 100%;
        line-height: 0.3rem;
        padding-top: 0.2rem;
        .vpt-label-item {
            width: 50%;
            margin-right: 0.2rem;
            display: flex;
            .vpt-label {
                color: #ffffffb3;
                font-size: 0.24rem;
            }
            .vpt-val {
                font-size: 0.3rem;
                color: #00B675;
                .vpt-unit {
                    color: #ffffffb3;
                    font-style: normal;
                    font-size: 0.24rem;
                }
            }
        }

    }
}
</style>